﻿@using CML.Intercamber.Business
@using CML.Intercamber.Web.Helpers
@{
    ViewBag.PageTitle = Resources.Intercamber.EstablishmentAdmin_PageName;
}
@section PageHead
{
    <style>
        .tipWidth
        {
            max-width: 500px !important;
        }
    </style>
    <script type="text/javascript">
        var texts = {
            AddEstablishment: '@Resources.Intercamber.EstablishmentAdmin_AddEstablishment',
            UpdateEstablishment: '@Resources.Intercamber.EstablishmentAdmin_UpdateEstablishment',
            ErrorDeleteConnectUser: '@Resources.Intercamber.EstablishmentAdmin_ErrorDeleteConnectUser',
            ConfirmDelete: '@Resources.Intercamber.EstablishmentAdmin_ConfirmDelete',
            Mandatory: '@Resources.Intercamber.Error_Mandatory',
        };

        var establishmentManager = new function () {

            var ttAdd = null;
            this.isCreatingNew = false;
            var editedId = null;
            this.openPopupAdd = function (isNew) {
                establishmentManager.isCreatingNew = isNew;
                if (ttAdd == null) {
                    ttAdd = $('<div />');
                    ttAdd.qtip({
                        show: {
                            effect: false,
                            modal: { on: true, blur: false }
                        },
                        content: $('#ttAdd'),
                        position: { my: 'center', at: 'center', target: $(window), viewport: $(window), adjust: { method: "shift", x: 0, y: 0 }, effect: false },
                        events: {
                            show: function () {
                                $(this).draggable();
                                $(this).qtip('option', { 'content.title': establishmentManager.isCreatingNew ? texts.AddEstablishment : texts.UpdateEstablishment, 'content.title.button': 'true' });
                            },
                            hide: function () {
                                $(this).qtip('option', { 'position.my': 'top left', 'position.target': [$(this).offset().left, $(this).offset().top] });
                            }
                        },
                        hide: false,
                        style: { classes: "qtip-bootstrap qtip-rounded tipWidth", tip: false }
                    });
                }
                ttAdd.qtip('option', 'content.title', isNew ? texts.AddEstablishment : texts.UpdateEstablishment);
                // reset form 
                if (establishmentManager.isCreatingNew) {
                    $("#LblEstablishment").val("");
                    $("#TimeZone").val("1");
                    $("#City").val("");
                    $("#Country").val("");
                    $("#MapPosX").val("");
                    $("#MapPosY").val("");

                } else {
                    var data = $("#gridEstablishments").getRowData(editedId);
                    $("#LblEstablishment").val(data.LblEstablishment);
                    $("#TimeZone").val(data.TimeZone);
                    $("#City").val(data.City);
                    $("#Country").val(data.IdCountry);
                    $("#MapPosX").val(data.MapPosX);
                    $("#MapPosY").val(data.MapPosY);
                }

                ttAdd.qtip('show');
            };

            this.popupHide = function () {
                ttAdd.qtip('hide');
            };

            this.save = function () {
                var valTimeZone = $("#TimeZone").val();
                if (valTimeZone == "")
                    valTimeZone = "0";
                var valCountry = $("#Country").val();
                var valLabel = $("#LblEstablishment").val();
                if (valLabel == "") {
                    alert(texts.Mandatory.replace("{0}", "@Resources.Intercamber.Label"));
                    return;
                }
                if (valCountry == "") {
                    alert(texts.Mandatory.replace("{0}", "@Resources.Intercamber.Country"));
                    return;
                }
                this.popupHide();
                $("#loading").show();

                var url = establishmentManager.isCreatingNew ? "/Admin/AddEstablishment" : "/Admin/UpdateEstablishment";
                var jsonParams = (establishmentManager.isCreatingNew ? "{" : "{'e.IdEstablishment':'" + editedId + "', ") +
                    "'e.LblEstablishment':\"" + valLabel.replace("\"", "") + "\", 'e.IdCountry': \"" + valCountry + "\", 'e.TimeZone': \"" + valTimeZone.replace("\"", "") + "\", 'e.City': \"" + $("#City").val().replace("\"", "") + "\", " +
                    "'e.MapPosX':" + $("#MapPosX").val() + ", 'e.MapPosY':" + $("#MapPosY").val() + " }";

                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json; charset=utf-8",
                    data: jsonParams,
                    dataType: "json",
                    success: function (result) {
                        $("#loading").hide();
                        if (result == true) {
                            establishmentManager.reloadGrid();
                        } else {
                            alert("Error!");
                        }
                    },
                    error: function (result) {
                        debugger;
                    }
                });
                ttAdd.qtip('hide');
            };

            this.init = function () {
                $("#gridEstablishments").jqGrid({
                    //autowidth: true,
                    datatype: 'json',
                    width: '100%',
                    height: '100%',
                    jsonReader: { 'repeatitems': false, 'id': 'IdEstablishment' },
                    loadonce: true,
                    url: '/Admin/EstablishmentsData',
                    viewrecords: true,
                    colModel: [
                        { name: 'IdCountry', hidden: true },
                        { name: 'MapPosX', hidden: true },
                        { name: 'MapPosY', hidden: true },
                        { name: 'IdEstablishment', fixed: true, formatter: establishmentManager.gridColumnEdit, label: '@Resources.Intercamber.Edit', resizable: false, sortable: false, width: 45, index: 'IdEstablishment', align: 'center' },
                        { name: 'IdEstablishment', fixed: true, formatter: establishmentManager.gridColumnDel, label: '@Resources.Intercamber.Delete', resizable: false, sortable: false, width: 45, index: 'IdEstablishment', align: 'center' },
                        { name: 'LblEstablishment', label: '@Resources.Intercamber.Name', align: 'center' },
                        { name: 'LabelCountry', label: '@Resources.Intercamber.Country', align: 'center', width: 100 },
                        { name: 'TimeZone', label: '@Resources.Intercamber.Country', align: 'center', width: 70 },
                        { name: 'City', label: '@Resources.Intercamber.City', align: 'center', width: 70 },
                        { name: 'NumberTeachers', label: '@Resources.Intercamber.EstablishmentAdmin_NumberTeachers', align: 'center', width: 70 },
                        { name: 'NumberStudents', label: '@Resources.Intercamber.EstablishmentAdmin_NumberStudents', align: 'center', width: 70 }
                ],
                subGrid: false,
                loadComplete: function () {
                    $("#gridEstablishments").jqGrid('setGridWidth', 800, true);
                },
            }).trigger("reloadGrid", [{ page: 1 }]);
        };

            this.reloadGrid = function () {
                $("#gridEstablishments").jqGrid().setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
            };

            this.gridColumnEdit = function (cellvalue, options, rowobject) {
                return "<img id=\"add" + cellvalue + "\" title=\"\" class='imgButton' src='/Images/Edit.gif' onclick=\"establishmentManager.edit(" + cellvalue + ");\" />";
            };

            this.gridColumnDel = function (cellvalue, options, rowobject) {
                return "<img id=\"del" + cellvalue + "\" title=\"\" class='imgButton' src='/Images/Delete.png' onclick=\"establishmentManager.delete('" + cellvalue + "', " + rowobject.NumberTeachers + ", " + rowobject.NumberStudents + ")\" />";
            };

            this.edit = function (id) {
                editedId = id;
                establishmentManager.openPopupAdd(false);
            };

            this.delete = function (id, nbTeacher, nbStudents) {
                if (nbTeacher > 0 || nbStudents > 0) {
                    alert(texts.ErrorDeleteConnectUser);
                    return;
                }
                if (!confirm(texts.ConfirmDelete))
                    return;
                $.ajax({
                    type: "POST",
                    url: "/Admin/DeleteEstablishment",
                    contentType: "application/json; charset=utf-8",
                    data: "{'idEstablishment':\"" + id + "\"}",
                    dataType: "json",
                    success: function (result) {
                        if (result == true)
                            establishmentManager.reloadGrid();
                        else
                            alert("error: " + result);
                    },
                    error: function (result) {
                        debugger;
                    }
                });
            };

        };


    $(function () {
        $(".jqbutton").button();
        $(".jqspinner").spinner();
        establishmentManager.init();
    });

    </script>
}

@section PageLeftBar {
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}

@section PageContent {
    <div class="innerTitle ui-corner-all">
        @Resources.Intercamber.EstablishmentAdmin_PageName
    </div>
    <br />
    <br />
    <div>
        <button id="btnAdd" class="jqbutton" onclick="establishmentManager.openPopupAdd(true); return false;">@Resources.Intercamber.Add</button>
        <span id="loading" style="display: none;">
            <img src="~/Images/Loading.gif" />
            @Resources.Intercamber.Loading
        </span>
    </div>
    <br />
    <table id="gridEstablishments" style="width: 100%"></table>

    <div id="ttAdd" style="display: none; width: 400px">
        <table cellpadding="2" cellspacing="2" width="100%">
            <tr>
                <td style="width: 100px">
                    @Resources.Intercamber.Label
                </td>
                <td>
                    <input type="text" id="LblEstablishment" class="ui-widget-content" style="width: 100%" />
                </td>
            </tr>
            <tr>
                <td>
                    @Resources.Intercamber.TimeZone
                </td>
                <td>
                    <input type="text" id="TimeZone" class="jqspinner" />
                </td>
            </tr>
            <tr>
                <td>
                    @Resources.Intercamber.City
                </td>
                <td>
                    <input type="text" id="City" class="ui-widget-content" style="width: 100%" />
                </td>
            </tr>
            <tr>
                <td>
                    @Resources.Intercamber.Country
                </td>
                <td>
                    <select id="Country">
                        <option value="">@Resources.Intercamber.ListAllCountries</option>
                        @foreach (Countries c in ViewBag.AllCountries)
                        {
 <text><option value="@c.IdCountry" @(c.IdCountry == ViewBag.PreferedCountry ? " selected" : "")>@ResourcesHelper.GetString("Countries_" + c.IdCountry)</option></text>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    @Resources.Intercamber.MapCoordinateX (max 360)
                </td>
                <td>
                    <input type="text" id="MapPosX" class="ui-widget-content" style="width: 100%" />
                </td>
            </tr>
            <tr>
                <td>
                    @Resources.Intercamber.MapCoordinateY (max 334)
                </td>
                <td>
                    <input type="text" id="MapPosY" class="ui-widget-content" style="width: 100%" />
                </td>
            </tr>
        </table>
        <br />
        <div class="ttButtons">
            <button class="jqbutton" onclick="establishmentManager.save(); return false; ">@Resources.Intercamber.Ok</button>
            &nbsp;
            <button class="jqbutton" onclick="establishmentManager.popupHide(); return false;">@Resources.Intercamber.Cancel</button>
        </div>
    </div>

}
